<template>
	<view class="add bg_color pdd_bottom2" v-if="!shows">
		<view v-if="!isEnter">
			<view class="tit-one">
				<view class="text">上传身份证照片</view>
				<view class="flex_center">
					<up-icon size="32rpx" :name="config.getImage('tanhao')"></up-icon>
					<view class="text">上传后自动识别内容</view>
				</view>
			</view>
			<view class="form">
				<view class="flex_center">
					<view class="sfzStyle">
						<image v-if="state.image1 == ''" :src="config.getImage('sfzzheng')" mode="widthFix" style="width: 326rpx; height: 208rpx" @click="paizhao('1')"></image>
						<image v-else :src="state.image1" mode="widthFix" style="width: 326rpx; height: 208rpx"></image>
						<view class="texts">身份证正面</view>
					</view>
					<view class="sfzStyle">
						<image v-if="state.image2 == ''" :src="config.getImage('sfzfan')" mode="widthFix" style="width: 326rpx; height: 208rpx" @click="paizhao('2')"></image>
						<image v-else :src="state.image2" mode="widthFix" style="width: 326rpx; height: 208rpx"></image>
						<view class="texts">身份证反面</view>
					</view>
				</view>
				<view class="flex_center" style="margin-top: 32rpx">
					<view class="sfzStyle">
						<image :src="config.getImage('sfzsure')" mode="widthFix" style="width: 158rpx; height: 118rpx"></image>
						<view class="texts">标准</view>
					</view>
					<view class="sfzStyle">
						<image :src="config.getImage('sfzcuo1')" mode="widthFix" style="width: 158rpx; height: 118rpx"></image>
						<view class="texts">边缘缺失</view>
					</view>
					<view class="sfzStyle">
						<image :src="config.getImage('sfzcuo2')" mode="widthFix" style="width: 158rpx; height: 118rpx"></image>
						<view class="texts">照片模糊</view>
					</view>
					<view class="sfzStyle">
						<image :src="config.getImage('sfzcuo3')" mode="widthFix" style="width: 158rpx; height: 118rpx"></image>
						<view class="texts">闪光强烈</view>
					</view>
				</view>
			</view>
			<view class="tit">
				<view class="text">个人信息</view>
				<view class="xing">*</view>
			</view>
			<Form ref="formRef" :formList="formList01" :formData="forms"></Form>
			<view class="tit">
				<view class="text">证件信息</view>
				<view class="xing">*</view>
			</view>
			<Form ref="formRef1" :formList="formList11" :formData="forms"></Form>
			<view class="tit">
				<view class="text">工作信息</view>
			</view>
			<Form ref="formRef2" :formList="formList22" :formData="forms"></Form>
			<view class="tit">
				<view class="text">户籍信息</view>
				<view class="xing">*</view>
			</view>
			<Form ref="formRef3" :formList="formList33" :formData="forms"></Form>
			<view class="tit">
				<view class="text">户籍所在地</view>
			</view>
			<Form ref="formRef4" :formList="formList4" :formData="forms"></Form>
			<view class="tit">
				<view class="text">实际居住地</view>
				<view class="xing">*</view>
			</view>
			<Form ref="formRef5" :formList="formList5" :formData="forms"></Form>
			<view class="font28 butt" @click="addItem">提交</view>
		</view>
		<SubmitState v-else :success="success" @successReturn="fanhui" @failReturn="isEnter = false"></SubmitState>
	</view>
	<view class="quanping" v-if="shows">
		<Camera :imgType="imgType" :isGyroscope="false" @getImgPath="getImgPath" @colseCamera="colseCamera"></Camera>
	</view>
	<FuJinSubmitModal :deleteShow="deleteShow1" @confirm="confirm1" @close="deleteShow1 = false"></FuJinSubmitModal>
</template>
<script setup>
import config from '@/config.js';
import { formList, formList1, formList2, formList3, formList4, formList5 } from './formListData.js';
import Camera from '@/components/camera.vue';
import changeData from 'utils/changeData.js';
import SubmitState from 'com/modal/SubmitState.vue';
import FuJinSubmitModal from 'com/modal/FuJinSubmitModal.vue';
import Form from 'com/Form.vue';
import dayjs from 'dayjs';
import { usersStore } from 'store/users.js';
import Api from 'api'
import { dictStore } from 'store/dicts.js';
const api = new Api
const store1 = dictStore();
const id = ref('');
const shows = ref(false);
const imgType = ref(null);
const formRef = ref(null);
const formRef1 = ref(null);
const formRef2 = ref(null);
const formRef3 = ref(null);
const formRef4 = ref(null);
const formRef5 = ref(null);
const store = usersStore();
const success = ref('');
const isEnter = ref(false);
const formList01 = ref([...formList]);
const formList11 = ref([...formList1]);
const formList33 = ref([...formList3]);
const formList22 = ref([...formList2]);
const deleteShow1 = ref(false);
onLoad(async (query) => {
	const res = await store1.getDict('national');
	formList01.value[5].columns = res;
	const res1 = await store1.getDict('card_type');
	formList11.value[0].columns = res1;
	const res2 = await store1.getDict('occupational_type');
	formList22.value[1].columns = res2;
	const res3 = await store1.getDict('address_type');
	formList33.value[0].columns = res3;
	if (query.id) {
		const res1 = await api.queryById('domesticPopulation',{
			id: query.id
		});
		forms.value = res1;
		const res = await store1.getDict('national');
		id.value = query.id;
		uni.setNavigationBarTitle({
			title: '编辑境内人口'
		});
	} else {
		uni.setNavigationBarTitle({
			title: '新增境内人口'
		});
	}
});

const fanhui = () => {
	uni.navigateBack();
};
const forms = ref({
	actualPlace: '', //实际居住地
	actualProvince: '', //实际省市区
	age: '', //年龄,
	birth: '', //出生日期
	card: '', //证件号码
	cardType: '', //证件类型
	cardOutUrl: '', //身份证背面
	cardUrl: '', //身份证正面
	consistencyIndividuals: '', //人户一致
	id: '', //id
	name: '', //姓名
	nationals: '', //民族
	occupation: '', //职业
	occupationType: '', //职业类型
	phone: '', //电话
	portraitUrl: '', //人像
	reason: '', //未落户原因
	registeredResidence: '', //户籍所在地
	registrationType: '', //住址登记类型
	reportStatus: '', //上报状态
	residencePlace: '', //户籍详细地址
	residenceProvince: '', //户籍省市区
	sex: '' //性别
});
watch(
	() => forms.value.birth,
	(newVal,_oldVal) => {
		const today = dayjs();
		const birthDay = dayjs(newVal);
		const age = today.diff(birthDay, 'year') - (today.month() < birthDay.month() || (today.month() === birthDay.month() && today.date() < birthDay.date()) ? 1 : 0);
		forms.value.age = age;
	}
);
watch(
	() => forms.value.cardType,
	async (newVal,_oldVal) => {
		const find = formList11.value.find((item) => item.prop == 'card');
		const res = await api.getRegex({ type: newVal });
		let rules;
		if (res == 0) {
			rules = {
				required: true,
				message: '请输入证件号',
				trigger: ['change', 'blur']
			};
		} else if (res == 1) {
			rules = {
				required: true,
				message: '请输入正确的证件号',
				validator: changeData.cardRouls,
				trigger: ['change', 'blur']
			};
		} else {
			rules = {
				required: true,
				message: '请输入正确的证件号',
				pattern: new RegExp(res),
				trigger: ['change', 'blur']
			};
		}
		find.disabled = false;
		find.rules = [rules];
		find.placeholder = '请输入正确的证件号';
	}
);
const state = reactive({
	image1: '',
	image2: ''
});
const paizhao = (e) => {
	if(e==2)return
	imgType.value = e;
	shows.value = true;
};
const getImgPath = (e) => {
	uni.showLoading({
		title: '加载中'
	});
	uni.uploadFile({
		url: `${config.interface}/jeecg-boot/app/upload/uploadFile?bizPath=card&customBucket=applet&name=${e}`,
		filePath: e,
		name: 'file',
		header: {
			'top-token': store.users.token
		},
		success: async (fileData) => {
			const obj = JSON.parse(fileData.data);
			shows.value = false;
			const res = await api.ocr({
				path: obj.result.url
			});
			forms.value.cardType = '01'
			forms.value.card = res.card
			const find1 = formList11.value.find((item) => item.prop == 'card');
			find1.disabled = false;
			const str = res.sex == '男' ? '1' : res.sex == '女' ? '2' :''
			forms.value.sex = str
			const find = formList01.value[5].columns.find(item=>item.name == res.nation+ '族') 
			find && (forms.value.nationals = find.value)
			forms.value.birth = res.birthday
			forms.value.name = res.name
			forms.value.residencePlace = res.address
			uni.hideLoading();
		},
		fail: (err) => {
			console.log(err);
			uni.hideLoading();
		}
	});
};
const colseCamera = (e) => {
	shows.value = false;
};
const addItem = async (cb) => {
	let submitPromises = [];
	submitPromises = [formRef.value, formRef1.value, formRef3.value, formRef5.value].map((form) => {
		return new Promise((resolve) => {
			form.submit(() => {
				resolve();
			});
		});
	});
	Promise.all(submitPromises).then(() => {
		store.isFuJing() ? (deleteShow1.value = true) : end();
	});
};
const confirm1 = () => {
	end();
};
const end = async () => {
	deleteShow1.value = false;
	let res;
	if (!store.users?.assress || store.users.assress.length == 0) {
			uni.redirectTo({
				url: '/pages/index/index'
			});
			return
		}
		const data = store.users.assress;
		const targetArea = changeData.findArea(unref(data), forms.value.actualProvince.split('-'));
		forms.value.provinceId = targetArea 
	if (id.value) {
		res = await api.edit('domesticPopulation',unref(forms));
	} else {
		res = await api.add('domesticPopulation',unref(forms));
	}
	success.value = res;
	isEnter.value = true;
};
</script>

<style lang="scss" scoped>
.form {
	background-color: #ffffff;
	padding: 32rpx;
}

.tit-one {
	font-family: 'SourceHanSansTC, SourceHanSansTC';
	font-weight: 400;
	text-align: left;
	font-style: normal;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 32rpx 32rpx 8rpx 32rpx;
	font-size: 24rpx;
	color: #888888;
}

.sfzStyle {
	display: flex;
	flex-direction: column;
	align-items: center;

	.texts {
		font-family: SourceHanSansTC, SourceHanSansTC;
		font-weight: 400;
		font-size: 24rpx;
		color: #222222;
		line-height: 34rpx;
		text-align: right;
		font-style: normal;
		margin-top: 16rpx;
	}
}

.quanping {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}
</style>
